import { ref } from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { useCookies } from "@vueuse/integrations/useCookies";
import { router } from "@/router";

export function useTabList() {

    const route = useRoute();
    const cookie = useCookies();

    const activeTab = ref(route.path);
    const tabList = ref([{
            title: "后台首页",
            path: "/",
        },
        {
            title: "商品管理",
            path: "/goods/list",
        },
    ]);

    //添加标签导航
    function addTab(tab) {
        let noTab = tabList.value.findIndex((t) => t.path == tab.path) === -1;
        if (noTab) {
            tabList.value.push(tab);
        }

        cookie.set("tabList", tabList.value);
    }

    //初始化标签导航列表
    function initTabList() {
        let tabs = cookie.get("tabList");
        if (tabs) {
            tabList.value = tabs;
        }
    }

    initTabList();

    onBeforeRouteUpdate((to, from) => {
        activeTab.value = to.path;
        addTab({
            title: to.meta.title,
            path: to.path,
        });
    });

    const changeTab = (t) => {
        activeTab.value = t;
        router.push(t);
    };

    const removeTab = (t) => {
        let tabs = tabList.value;
        let a = activeTab.value;
        if (a == t) {
            tabs.forEach((tab, index) => {
                if (tab.path == t) {
                    const nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                        a = nextTab.path;
                    }
                }
            });
        }

        activeTab.value = a;
        tabList.value = tabList.value.filter((tab) => tab.path != t);

        cookie.set("tabList", tabList.value);
    };

    const handleClose = (c) => {
        if (c === "clearAll") {
            //切换回首页
            activeTab.value = "/";
            //过滤只剩下首页
            tabList.value = [{
                title: "后台首页",
                path: "/",
            }, ];
        } else if (c === "clearOther") {
            //过滤只剩下首页和当前激活
            tabList.value = tabList.value.filter(
                (tab) => tab.path == "/" || tab.path == activeTab.value
            );
        }
        cookie.set("tabList", tabList.value);
    };

    return {
        activeTab,
        tabList,
        changeTab,
        removeTab,
        handleClose
    }
}